<script setup>
import { defineProps, inject, reactive, ref, watch } from "vue";
import HighlightWords from "vue-highlight-words";
import { useI18n } from "vue-i18n";
import dynamicIcon from "@/components/custom/DynamicIcon.vue";
import { throttle } from "@/utils/customFunc";
import { customerListSearch,getCustomerInfo } from "@/api/customer";

const modalsState = inject("modalsState");
const setNewCustomer = inject("setNewCustomer");
const loading = ref(false);
const conditison = reactive({
  keyword: "",
  page: 1,
  limit: 10,
});
const customerList = ref([]);
const { t } = useI18n();
const customerInfoForm = ref([]);
const customerInfo = reactive({
  uid:null,
  now_money:null,
  money:0,
  balance:0
});
const props = defineProps({
  modalTitle: {
    type: String,
    default: null,
  },
  modalWidth: {
    type: Number,
    default: 760,
  }
});

const searchCustomerDetails = () => {
  loading.value = true;
};


const getInfo = async(uid) => {
  const { data } = await getCustomerInfo(uid);
  customerInfoForm.value = data;
};

const onClear = () => {
  customerList.value = [];
  getInfo(0);
};
const onConfirm = () => {
  setNewCustomer({
    uid:customerInfo.uid,
    full_name:customerInfo.full_name,
    balance:customerInfo.now_money,
    integral:customerInfo.integral,
    avatar:customerInfo.avatar
  })
}
const handleEdit = () => {};
getInfo(0);

const handleSearch = throttle(async () => {
  //console.log(conditison.keyword == "" || !conditison.keyword);
  if (
    conditison.keyword == "" ||
    conditison.keyword.trim() === "" ||
    !conditison.keyword
  ) {
    customerList.value = [];
    return false;
  }

  const { data } = await customerListSearch({
    keyword: conditison.keyword,
    page: conditison.page,
    limit: conditison.limit,
  });

  const list = [];
  data.list.forEach((item) => {
    let isAdd = false;

    if (
      item.now_money.toLowerCase().includes(conditison.keyword.toLowerCase())
    ) {
      list.push({
        ...item,
        label: item.full_name,
        value: item.full_name,
        type: 1,
      });
      isAdd = true;
    }

    if (
      !isAdd &&
      item.phone_no.toLowerCase().includes(conditison.keyword.toLowerCase())
    ) {
      list.push({ ...item, label: item.phone_no, value: item.phone_no, type: 2 });
      isAdd = true;
    }

    if (
      !isAdd &&
      item.email.toLowerCase().includes(conditison.keyword.toLowerCase())
    ) {
      list.push({ ...item, label: item.email, value: item.email, type: 3 });
    }
  });
  customerList.value = list;
}, 1300);

const onSelect = async (e) => {
  customerList.value.forEach((item) => {
    if (item.value == e) {
      customerInfo.uid = item.uid;
      customerInfo.full_name = item.full_name;
      customerInfo.now_money = item.now_money;
      customerInfo.integral = item.integral;
      customerInfo.avatar=item.avatar;
    }
  });
  await getInfo(customerInfo.uid);
};
</script>

<template>
  <div class="h-full relative">
    <a-drawer
      :width="modalWidth"
      :mask-closable="false"
      :closable="false"
      :title="$t('customer.searchCustomer')"
      @ok="onConfirm"
      v-model:visible="modalsState.showCustomerSearchModal"
    >
      <div class="w-2/3 m-auto mt-5 flex items-center">
        <a-auto-complete
          v-model="conditison.keyword"
          :data="customerList"
          @change="handleSearch"
          @select="onSelect"
          @clear="onClear"
          :allow-clear="true"
          autocomplete="off"
          class="bg-white border-gray-200 shadow-md shadow-gray-100 rounded-3xl pt-1 pb-1"
        >
          <template #option="{ data }">
            <div class="flex text-xs pt-3 pb-3">
              <div class="text-gray-500 flex items-center mr-2">
                <dynamic-icon :type="'user'" />
                <highlight-words
                  v-if="data.raw.type === 1"
                  :search-words="[conditison.keyword]"
                  :text-to-highlight="data.raw.full_name"
                />
                <span v-else>{{ data.raw.full_name }}</span>
              </div>
              <div class="mr-2 flex items-center">
                <dynamic-icon :type="'phone'" />
                <highlight-words
                  v-if="data.raw.type === 2"
                  :search-words="[conditison.keyword]"
                  :text-to-highlight="data.raw.phone_no"
                />
                <span v-else>{{ data.raw.phoneNo }}</span>
              </div>
              <div class="flex items-center">
                <dynamic-icon :type="'email'" />
                <highlight-words
                  v-if="data.raw.type === 3"
                  :search-words="[conditison.keyword]"
                  :text-to-highlight="data.raw.email"
                />
                <span v-else>{{ data.raw.email }}</span>
              </div>
            </div>
          </template>
        </a-auto-complete>
        <span
          class="flex items-center absolute right-10 text-blue-600 pl-3 cursor-pointer"
          @click="modalsState.showCustomerCreate = true"
        >
          <icon-plus /> {{ t("customer.createCustomer") }}
        </span>
      </div>
      <div class="relative mt-5">
        <div class="m-5" v-if="customerInfoForm.length>0">
          <a-descriptions
            size="mini"
            v-for="(row, index) in customerInfoForm"
            :key="index"
            style="margin-bottom: 25px"
            :title="t(row.itemName)"
            :column="{ xs: 2, sm: 4, md: 4, lg: 4 }"
            layout="inline-vertical"
            bordered
          >
            <a-descriptions-item
              v-for="(item, index2) of row.list"
              :key="index2"
              :label="t(item.label)"
              :span="item.span"
            >
              <span>
                <a-typography-text v-if="item.value !== '--' && item.is_edit">
                  {{ item.value }}
                  <icon-edit @click="handleEdit" class="cursor-pointer" />
                </a-typography-text>
                <span v-else>{{ item.value }}</span>
              </span>
            </a-descriptions-item>
          </a-descriptions>
        </div>
        <div class="p-5 w-2/3 m-auto">
              <div class="text-center">
                <a-checkbox >
                  <a
                    href=""
                    _target="_blank"
                    class="border-b border-gray-500"
                    >{{ t("customer.policy") }}</a
                  >
                </a-checkbox>
              </div>
            </div>
        <a-spin
          dot
          class="absolute top-56 left-0 right-0 m-auto"
          style="width: 100px"
          v-if="loading"
        />
      </div>
    </a-drawer>
  </div>
</template>

<style scoped lang="less"></style>
